<template>
	 <div class="table">
        <div class="table_head">
          <div class="table_tht"><text style="font-size: 24px;color: #666666;">序号</text></div>
          <div class="table_thtt"><text style="font-size: 24px;color: #666666;">玩法</text></div>
          <div class="table_thttt">
            <text style="font-size: 24px;color: #666666;" v-if="lotteryId==1">红球</text>
            <text style="font-size: 24px;color: #666666;" v-if="lotteryId==2">前区</text>
          </div>
          <div class="table_thtttt">
            <text style="font-size: 24px;color: #666666;" v-if="lotteryId==1">篮球</text>
            <text style="font-size: 24px;color: #666666;" v-if="lotteryId==2">后区</text>
          </div>
          <div class="table_thttttt"><text style="font-size: 24px;color: #666666;">倍数</text></div>
        </div>
        <div class="table_body">
            <div class="table_tr" v-for="(item,index) in tablelist" :key="index">
              <div class="table_trt"><text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;">{{index+1}}</text></div>
              <div class="table_trtt"><text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;">{{item.type}}</text></div>
              <div v-if="item.danRedBall.length===0" class="table_trttt"><text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;margin-left:5px;margin-right:5px;" v-for="(i,index) in item.redball" :key="index/3">{{i}}</text></div>
              <div v-if="item.danRedBall.length!=0" class="table_trttt1">
                  <div class="dan">
                      <text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;margin-left:5px;margin-right:5px;">胆:</text>
                      <text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;margin-left:5px;margin-right:5px;" v-for="(i,index) in item.danRedBall" :key="index/4">{{i}} </text>
                  </div>
                  <div class="tuo">
                    <text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;margin-left:5px;margin-right:5px;">拖:</text>
                    <text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;margin-left:5px;margin-right:5px;" v-for="(i,index) in item.tuoRedBall" :key="index/5">{{i}}</text>
                  </div>
              </div>
              <div class="table_trtttt" v-if="item.danBlueBall.length===0">
                <text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;margin-left:5px;margin-right:5px;" v-for="(ii,index) in item.blueBall" :key="index/6">{{ii}}</text>
              </div>
              <div class="table_trtttt1" v-if="item.danBlueBall.length!=0">
                <div class="dan">
                  <text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;margin-left:5px;margin-right:5px;">胆:</text>
                  <text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;margin-left:5px;margin-right:5px;" v-for="(ii,index) in item.danBlueBall" :key="index/7">{{ii}}</text>
                </div>
                <div class="tuo">
                      <text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;margin-left:5px;margin-right:5px;">拖:</text>
                <text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;margin-left:5px;margin-right:5px;" v-for="(ii,index) in item.tuoblueBall" :key="index/8">{{ii}}</text>
                </div>
              </div>
              <div class="table_trttttt"><text style="font-family: PingFangSC-Medium;font-size: 24px;color: #444444;">{{multiple}}</text></div>
            </div>
        </div>
      </div>
</template>
<style>
.table {
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 24px;
}
.table_head {
  width: 686px;
  height: 66px;
  background-color: #ebebeb;
  display: flex;
  flex: 1;
  flex-direction: row;
}
.table_tht {
  display: flex;
  flex: 2;
  align-items: center;
  justify-content: center;
}
.table_tr{
  display: flex;
  flex: 1;
  flex-direction: row;
  border-bottom-width: 1px;
  border-bottom-color: rgb(245,245,245);
  border-bottom-style: solid;
  padding-bottom: 10px;
  padding-top: 10px;
  border-left-width: 1px;
  border-left-color: rgb(245,245,245);
  border-left-style: solid;
  border-right-width: 1px;
  border-right-color: rgb(245,245,245);
  border-right-style: solid;
}
.table_thtt {
  display: flex;
  flex: 2;
  align-items: center;
  justify-content: center;
}
.table_thttt {
  display: flex;
  flex: 5;
  align-items: center;
  justify-content: center;
}
.table_thtttt {
  display: flex;
  flex: 4;
  align-items: center;
  justify-content: center;
}
.table_thttttt {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.table_trt {
  flex: 2;
  flex-wrap: wrap;
  display: flex;
  padding-bottom: 10px;
  margin-bottom: 10px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.table_trtt {
 flex: 2;
 padding-bottom: 10px;
 margin-bottom: 10px;
 flex-wrap: wrap;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
}
.table_trttt {
  padding-bottom: 5px;
  margin-bottom: 5px;
  flex: 5;
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.table_trttt1{
  flex: 4;
}
.dan{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.tuo{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.table_trtttt {
  padding-bottom: 10px;
  margin-bottom: 10px;
  flex: 4;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.table_trtttt1{
  flex: 4;
}
.table_trttttt{
  padding-bottom: 10px;
  margin-bottom: 10px;
  flex: 1;
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.batdetail_table_title {
  margin-top: 32px;
  margin-bottom: 24px;
  margin-left:32px;  
  background-color: rgb(245, 245, 245);
  justify-content: center;
  align-items: center;
}
.table_body {
  width: 686px;
}
</style>
  
<script>
const modal = weex.requireModule("modal");
export default {
  props:['tablelist','multiple','lotteryId'],
  data: function() {
    return {
      
    };
  },
  created: function() {
    
  },
  methods: {
  }
}
</script>